<template>
  <div class="select-no-border">
    <span style="color: #666666">{{label}}：</span>
    <a-select
        :style="{minWidth:width}"
        :placeholder="placeholder"
        v-model="value"
        @change="handleChange">
      <a-select-option v-for="item in options" :key="item.value" :value="item.value">
        {{ item.name }}
      </a-select-option>
    </a-select>
  </div>
</template>

<script>
export default {
  name: 'selectNoborder',
  props: {
    label: {
      type: String,
      default: ''
    },
    defaultVal: {
      type: String,
      default: undefined
    },
    placeholder:{
      type:String,
      default:''
    },
    width:{
      type:String,
      default:'80px'
    },
    options: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data(){
    return{
      value: this.defaultVal ? this.defaultVal : undefined
    }
  },
  methods: {
    handleChange(val) {
      this.$emit('selectChangeVal', val);
    }
  }
};
</script>

<style lang="scss" scoped>
.select-no-border {
  min-width: 55px;
  margin-right: 20px;

}
</style>
<style lang="scss">
.select-no-border {
  .ant-select-arrow {
    color: #333333;
    right: 5px;
  }
  .ant-select-selector {
    border: none;
  }

  .ant-select-selection {
    border: none;
    box-shadow: none;
  }
  .ant-select-selection__placeholder {
    color: #999999;
  }
  .ant-select-selection-selected-value {
    color: #333333;
  }
}
</style>
